import React, { useEffect,useState,useRef } from 'react'
import { Toast, NavBar } from 'react-vant';
import s from './style.module.less'
import { useNavigate,useLocation } from 'react-router-dom';
import axios from '@/utils/axios.js'
import { useStore, observer } from '@/store'
let count 
let SetInterval
export default function goToMessageContent() {
  const location = useLocation()
  const { userStore } = useStore()
  const info = location?.state?.data?.info
  const [inputContent, setinputContent] = useState('')
  const [messageArr, setmessageArr] = useState([])
  const navigate = useNavigate()
  const goToHome = ()=>{
    navigate('/message')
  }
    // 获取现在的所有信息 
    const getAllMessage = () => {
        axios.get('/message').then((result)=>{
            // console.log(result?.data?.list);
            if (result?.data?.list?.length > 0) {
                // 发送方 或者接受方 
                const arr = result?.data?.list.filter((item)=>{
                    return item.fromId == userStore?.myId || item.toId == userStore?.myId
                })
                if (count == arr.length) {
                    return 
                }else {
                    setmessageArr(arr)
                    setTimeout(()=>{
                        const scrollDom = document.getElementById('scrollDom')
                        scrollDom.scrollTop = scrollDom.scrollHeight
                    },0)
                    count = arr.length

                }

            } 
            })
    }
  useEffect(() => {
    // console.log(userStore?.myId,'userStore?.id');
    // console.log(info,'info');
    axios.get('/message').then((result)=>{
        // console.log(result?.data?.list);
        if (result?.data?.list?.length > 0) {
            // 发送方 或者接受方 
            const arr = result?.data?.list.filter((item)=>{
                return item.fromId == userStore?.myId || item.toId == userStore?.myId
            })
            setmessageArr(arr)
            count = arr.length
            setTimeout(()=>{
                const scrollDom = document.getElementById('scrollDom')
                scrollDom.scrollTop = scrollDom.scrollHeight
            },0)
        } 
    })

    SetInterval = setInterval(()=>{
    getAllMessage()
    },500)
    
  }, [],()=>{
    clearInterval(SetInterval)
  })

  const send = ()=>{

    console.log(inputContent,'inputContent');
    if (!inputContent) {
       Toast('请输入内容') 
       return
    }
    if (userStore?.myId && info.id) {
        axios.post('/message/create',{
            fromId:userStore?.myId,
            toId:info.id,
            content:inputContent
        }).then((res)=>{
          if (res) {
            console.log(res);
            setinputContent('')
            let inputDom = document.getElementById('Input')
            inputDom.value = ''
          }
          
        })
    }
   
  }
  const change = (e)=> {
   setinputContent(e?.target?.value)
  }
  // 自己的消息 内容
  const selfContent = (item) => {
    console.log(item,'item');
    return (
        <div className={s.selfContent}>
            <div style={{
                marginLeft:'10px'
            }}>
                <img className={s.img} src="https://tse3-mm.cn.bing.net/th/id/OIP-C.0fRrz1A8P2v9jZ9qpJEi0gAAAA?w=204&h=204&c=7&r=0&o=5&dpr=1.1&pid=1.7" alt="" />
            </div>
            <div className={s.content}>
                {item?.content}
            </div>
        </div>
    )
  }
  // 对方的消息 内容
  const otherContent = (item) => {
    return (
        <div className={s.selfContent1}>
            <div style={{
                marginRight:'10px'
            }}>
                <img className={s.img} src="https://tse3-mm.cn.bing.net/th/id/OIP-C.0fRrz1A8P2v9jZ9qpJEi0gAAAA?w=204&h=204&c=7&r=0&o=5&dpr=1.1&pid=1.7" alt="" />
            </div>
            <div className={s.content1}>
                {item?.content}
            </div>
        </div>
    )
  }
  // 选择消息类型
  const selectContent = (item) => {
    if (item?.fromId == userStore?.myId) {
        if (item?.houseId) {
            // 自己的 房屋消息
        } else {
            // 自己的 内容消息
            return (
                <div style={{
                    margin:'20px'
                }}>
                    { selfContent(item)}
                </div>
            )
           
        }
    }else {
        // 对方的消息
        if (item?.houseId) {
            // 房屋消息
        } else {
            // 对方的文本消息
            return (
                <div style={{
                    margin:'20px'
                }}>
                    { otherContent(item) }
                </div>
            )
        }
    }
  }
  return (
    <div className={s.main}>
      <NavBar
      color={'#fff'}
      title={info?.name}
      leftText='返回'
      onClickLeft={() => goToHome()}
      rightText={<svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M16.9961 7.68583C17.7227 7.68583 18.3921 8.07985 18.7448 8.71509L21.1912 13.1219C21.5115 13.6989 21.5266 14.3968 21.2314 14.9871L18.8746 19.7008C18.8746 19.7008 19.5576 23.2122 22.416 26.0706C25.2744 28.929 28.7741 29.6002 28.7741 29.6002L33.487 27.2438C34.0777 26.9484 34.7761 26.9637 35.3533 27.2846L39.7726 29.7416C40.4072 30.0945 40.8008 30.7635 40.8008 31.4896L40.8008 36.5631C40.8008 39.1468 38.4009 41.0129 35.9528 40.1868C30.9249 38.4903 23.1202 35.2601 18.1734 30.3132C13.2265 25.3664 9.99631 17.5617 8.29977 12.5338C7.47375 10.0857 9.33984 7.68583 11.9235 7.68583L16.9961 7.68583Z" fill="none" stroke="#000" stroke-width="4" stroke-linejoin="round"/></svg>}
      onClickRight={() => Toast('按钮')}
    />
    <div id='scrollDom' className={s.outerDiv}>
        <div className={s.mainContent}>
            {
                messageArr.map((item)=>{
                    return selectContent(item)
                })
            }
        </div>
    </div>

      <div className={s.bottom}>
        <div style={{
            height:'30px',
            width:'30px',
            borderRadius:'5px',
            backgroundColor:'white',
            marginRight:'5px'
        }}>
            <svg width="26" height="26" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="16" y="4" width="16" height="28" rx="8" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M10 21V24C10 31.732 16.268 38 24 38V38C31.732 38 38 31.732 38 24V21" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M24 5V11" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M16 16H21" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M27 16H32" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M16 22H21" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M27 22H32" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M24 38V44" stroke="#000000" stroke-width="4"/><path d="M16 44H32" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></svg>
        </div>
        <div className={s.Input}>
            <input id='Input' onChange={change} type="text" />
            <svg style={{marginRight:'10px'}} onClick={send} width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M43 5L29.7 43L22.1 25.9L5 18.3L43 5Z" stroke="#000000" stroke-width="4" stroke-linejoin="round"/><path d="M43.0001 5L22.1001 25.9" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></svg>
        </div>
        <div>

        </div>
      </div>
    </div>
  )
}
